<template>
	<div class="content-outside">
		<div class="content">
			<h2>作品登记申请表<span>系统将自动保存填写的信息，可在个人中心下进行修改和删除</span></h2>

			<div class="form_box">
				<el-form :model="copyright" :rules="copyright_rules" ref="copyright" label-width="150px">
					<div class="form_width">
						<!-- 作品样本 op -->
						<div class="hr">
							<p>作品样本</p>
						</div>

						<el-form-item label="作品样本" prop="sample_pic">
							<div class="upload-div">
								<!-- <a class="example" href="javascript:void(0);">格式预览</a> -->
								<el-upload
								:action="uploadUrl"
								:data="fileInfo.zuopinyangben"
								:on-success="sampleSuccess"
								:before-upload="sampleUpload"
  								:on-remove="sampleRemove"
								:limit="10"
								:on-exceed="sampleExceed"
								list-type="picture-card"
								:file-list="fileList.sample">
  								<i class="el-icon-plus"></i>
								<!-- <el-button size="small" type="primary">添加</el-button> -->
								<div slot="tip" class="el-upload__tip my_tip">注意：<br />1、上传文件不得超过20M; <br />2、文件格式必须符合条件，支持上传格式：png、jpg、jpeg、txt、pdf、docx、doc、xls、xlsx、ppt、mp4、avi格式。</div>
								</el-upload>
							</div>
						</el-form-item>
						<!-- 作品样本 ed -->

						<!-- 作品基本信息 op -->
						<div class="hr">
							<p>作品基本信息</p>
						</div>

						<el-form-item label="作者信息">
							<div class="upload-div">
								<!-- <a class="example" href="javascript:void(0);">格式预览</a> -->
								<el-upload
								:action="uploadUrl"
								:data="fileInfo.author"
								:on-success="authorSuccess"
								:before-upload="authorUpload"
  								:on-remove="authorRemove"
								:file-list="fileList.author">
								<el-button size="small" type="primary">添加</el-button>
								<div slot="tip" class="el-upload__tip my_tip">（请上传身份证正反面； jpg/png/gif/bmp 格式，小于2M）</div >
								</el-upload>
							</div>
						</el-form-item>

						<el-form-item label="作品名称" prop="product_name">
							<el-input v-model="copyright.product_name"></el-input>
						</el-form-item>

						<el-form-item label="作品类型" prop="product_type">
							<el-radio-group v-model="copyright.product_type">
								<el-radio v-for="item in product_type" :label="item.value" :key="item.label">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="著作权人信息">
							<div class="upload-div">
								<!-- <a class="example" href="javascript:void(0);">格式预览</a> -->
								<el-upload
								:action="uploadUrl"
								:data="fileInfo.zhuzuoquanren"
								:on-success="ownerSuccess"
								:before-upload="ownerUpload"
  								:on-remove="ownerRemove"
								:file-list="fileList.owner">
								<el-button size="small" type="primary">添加</el-button>
								<div slot="tip" class="el-upload__tip my_tip">（请上传身份证正反面； jpg/png/gif/bmp 格式，小于2M）</div >
								</el-upload>
							</div>
						</el-form-item>

						<el-form-item label="权利取得">
							原始取得
						</el-form-item>

						<el-form-item label="权利归属">
							个人作品
						</el-form-item>

						<!-- 作品基本信息 ed -->

						<!-- 作品创作信息 op -->
						<div class="hr">
							<p>作品创作信息</p>
						</div>

						<el-form-item label="创作开始日期" prop="start_date">
							<el-date-picker :editable="false" type="date" placeholder="选择日期" v-model="copyright.start_date" style="width: 350px;"></el-date-picker>
						</el-form-item>

						<el-form-item label="修改次数" prop="edit_times">
							<el-input v-model.number="copyright.edit_times" style="width: 350px;"></el-input>
						</el-form-item>

						<el-form-item label="创作完成日期" prop="finish_date">
							<el-date-picker :editable="false" type="date" placeholder="选择日期" v-model="copyright.finish_date" style="width: 350px;"></el-date-picker>
						</el-form-item>

						<el-form-item label="创作地点" prop="finish_region">
							<el-row class="address">
								<el-col :span="5">
									<el-form-item>
										<el-select v-model="copyright.finish_region" placeholder="请输入省" @change="finish_regionChange">
											<el-option v-for="item in regions" :key="item.value" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="5" style="padding-left: 10px;">
									<el-form-item prop="publish_city">
										<el-select v-model="copyright.finish_city" placeholder="请输入市">
											<el-option v-for="item in finish_citys" :key="item.value" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<!-- <el-form-item prop="detail">
										<el-input placeholder="请填写详细地址" :number="true" v-model="form.detail">
										</el-input>
									</el-form-item> -->
								</el-col>
							</el-row>
							<!-- <el-cascader :options="options" change-on-select></el-cascader> -->
						</el-form-item>
						<!-- 作品创作信息 ed -->

						<!-- 作品发表信息 op -->
						<div class="hr">
							<p>作品发表信息</p>
						</div>

						<el-form-item label="发表状态" prop="publish_status">
							<el-radio-group v-model="copyright.publish_status">
								<el-radio v-for="item in publish_status" :label="item.value" :key="item.label">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>

						<div v-if="copyright.publish_status != 0">
							<el-form-item label="首次发表日期" prop="publish_date">
								<el-date-picker :editable="false" type="date" placeholder="选择日期" v-model="copyright.publish_date"></el-date-picker>
							</el-form-item>
							<el-form-item label="首次发表地点" prop="publish_region">
								<el-row class="address">
									<el-col :span="5">
										<el-form-item >
											<el-select v-model="copyright.publish_region" placeholder="请输入省" @change="publish_regionChange">
												<el-option v-for="item in regions" :key="item.value" :value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="5" style="padding-left: 10px;">
										<el-form-item prop="publish_city">
											<el-select v-model="copyright.publish_city" placeholder="请输入市">
												<el-option v-for="item in publish_citys" :key="item.value" :value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<!-- <el-form-item prop="detail">
											<el-input placeholder="请填写详细地址" :number="true" v-model="form.detail">
											</el-input>
										</el-form-item> -->
									</el-col>
								</el-row>
								<!-- <el-cascader :options="options" change-on-select></el-cascader> -->
							</el-form-item>
						</div>
						<!-- 作品发表信息 ed -->
					</div>
				</el-form>
			</div>
			<div class="form_next">
				<el-button type="primary" @click="submitApiFn">下一步</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import addressData from '@/assets/js/addressData.js';// 地址
	import util from '@/assets/js/util.js';// 时间格式化
	import { isreal, addAuthor, authorlist, authorup, addowner, ownerlist, ownerup, submitApi, update, submitfile, look, imgSrc } from '@/api';
	import { mapState, mapMutations } from 'vuex'

	function formatData(data){
		var result = [];
		for(var key in data){
			result.push({
				value: key
			})
		}
		return result
	}

	export default {
		data() {
			return {

				copyright_number: null, // 流水号
				// 上传地址
				uploadUrl: submitfile,
				imageUrl: '',
				fileInfo: {
					// 1
					author: {
						type: 'pic',
						folder: 'author',
					},
					zhuzuoquanren: {
						type: 'pic',
						folder: 'zhuzuoquanren',
					},
					// 3
					zuopinyangben: {
						type: 'all',
						folder: 'zuopinyangben',
					},

				},

				fileList: {
					author: [],// 作者身份证文件
					ower: [],// 著作权人身份证文件
					sample: [], // 上传附件
				},

				regions: formatData(addressData), // 省份

				copyright: {
					sample_pic: [], //  作品样本
					product_name: '', //  作品名称
					product_type: '', //   作品类型

					// 1文字，2口述，3音乐，4喜剧，5曲艺，6舞蹈，7杂技艺术，8美术，9建筑，10摄影，11模型，12电影，13电影和类似摄制电影方法创作的作品，14工程设计图、产品设计图，15地图、示意图，16,其它

					right_obtain_way: '', //  权利取得
					finish_region: '', //   完成省份
					finish_city: '', //  完成城市
					finish_date: '', //   完成时间

					publish_status: 0, //   发表状态
					publish_date: '', //  发表时间
					publish_region: '', //  发表省份
					publish_city: '', //  发表城市

					start_date: '', // 创作开始时间
					edit_times: '', // 修改次数

				},

				copyright_rules: {
					// 1
					// product_name: [{ required: true, message: '这是必填项或必选项' }],
				},

				// 作品类型选项
                product_type: [{
					value: 1,
					label: '文字'
				},{
					value: 2,
					label: '口述'
				},{
					value: 3,
					label: '音乐'
				},{
					value: 4,
					label: '戏剧'
				},{
					value: 5,
					label: '曲艺'
				},{
					value: 6,
					label: '舞蹈'
				},{
					value: 7,
					label: '杂技艺术'
				},{
					value: 8,
					label: '电影和类似摄制电影方法创作的作品'
				},{
					value: 9,
					label: '工程设计图、产品设计图'
				},{
					value: 10,
					label: '地图、示意图'
				},{
					value: 11,
					label: '其他'
				}],

				// 发表状态选项
				publish_status: [{
					value: 0,
					label: '未发表'
				},{
					value: 1,
					label: '已发表'
				}],

				region: {
					finish: '',
					publish: '',
					owner: ''
				},
				// 更新状态
				update_status: false

			}
		},
		computed: {
			finish_citys: function (){
				return formatData(addressData[this.copyright.finish_region])
			},
			publish_citys: function (){
				return formatData(addressData[this.copyright.publish_region])
			},
			...mapState([
				'croUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),

			// 作者身份证上传
			authorSuccess(res, file) {
				if(res.data){
					let para = {
						user_id: this.croUser.user_id,
						copyright_number: this.copyright_number,
						author_id_card: res.data
					};

					addAuthor(para).then(res => {
						if(res.data){
							this.$message.success(res.msg);
						}else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
					});
				}else{
					this.$message.error(res.msg);
				}
			},

			authorRemove(file,fileList) {
			},

			authorUpload(file) {
			},
			authorExceed(files, fileList) {
				// this.$message.warning(`只能上传1个文件`);
			},

			// 著作权人身份证上传
			ownerSuccess(res, file) {
				if(res.data){
					// this.imageUrl = URL.createObjectURL(file.raw);
					// this.addOwner.id_pic = res.data;
					// this.editOwner.id_pic = res.data;
					let para = {
						user_id: this.croUser.user_id,
						copyright_number: this.copyright_number,
						id_pic: res.data
					};

					// console.log(para);
					addowner(para).then(res => {
						if(res.data){
							this.$message.success(res.msg);
						}else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
					});
				}else{
					this.$message({
						message: res.msg,
						type: 'error'
					});
				}
			},

			ownerRemove(file,fileList) {

			},
			ownerExceed(files, fileList) {
				// this.$message.warning(`只能上传1个文件`);
			},
			ownerUpload(file) {
			},

			// 创作完成地点地址联动
			finish_regionChange: function (val) {

				if(this.region.finish != val && this.region.finish !=''){
					this.copyright.finish_city='';
				}
				this.region.finish = val; // oldVal
				var data = formatData(addressData[this.copyright.finish_region]);
				for(var i =0; i<data.length; i++){
					this.$set(this.finish_citys,i,data[i]);
				}
			},
			// 首次发表地点地址联动
			publish_regionChange: function (val) {
				if(this.region.publish != val && this.region.publish !=''){
					this.copyright.publish_city='';
				}
				this.region.publish = val; // oldVal
				var data = formatData(addressData[this.copyright.publish_region]);
				for(var i =0; i<data.length; i++){
					this.$set(this.publish_citys,i,data[i]);
				}
			},

			// 3
			// 上传样本
			sampleSuccess(res, file, fileList) {
				if(res.data){
					
					this.fileListFn(fileList, 'sample_pic');
					// this.copyright.sample_pic.push(res.data);

					this.$message({
						message: '添加成功',
						type: 'success'
					});
				}else{
					this.$message({
						message: res.msg,
						type: 'error'
					});
				}
			},
			sampleUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				const isLt20M = file.size / 1024 / 1024 < 20;

				// if (!isJPG) {
				// this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt20M) {
				this.$message.error('上传文件大小不能超过 20MB!');
				}
				// return isJPG && isLt2M;
				return isLt20M;
			},
			sampleRemove(file, fileList) {
				this.fileListFn(fileList, 'sample_pic');
				// this.copyright.sample_pic.push(res.data);
			},
			sampleExceed(files, fileList) {
				this.$message.warning(`最多上传10个文件`);
			},
			
			// 设置数据
			fileListFn(fileList, fieldName){
				let arr = [];
				for (let i = 0; i < fileList.length; i++) {

					if(fileList[i].response){
						arr[arr.length] = fileList[i].response.data;
					}else{
						let url = fileList[i].url;
						if(imgSrc == 'http://192.168.1.49:8088/platform/api2/public/static'){
							arr[arr.length] = url.slice(url.indexOf('\\upload'));
						}else{
							arr[arr.length] = url.slice(url.indexOf('/upload'));
						}
					}
					// arr[arr.length] = fileList[i].response.data;
				}
				this.copyright[fieldName] = arr;
			},

			// 获取已提交数据
			lookFn(){
				let para={
					copyright_number: this.copyright_number,
					user_id: this.croUser.user_id,
				}
				look(para).then(res => {
					if(res.data){
						this.copyright = res;
						// 设置默认省份 选择省份清空城市
						this.region.finish = this.copyright.finish_region;
						this.region.publish = this.copyright.publish_region;

						// 若已上传样本设置默认值
						let sample_pic = this.copyright.sample_pic;
						let arr = [];
						for( let i=0; i<sample_pic.length; i++){
							arr[i] = {
								name: '样本'+ i,
								url: imgSrc+sample_pic[i]
							}
						}
						this.fileList.sample = arr;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}
					// else {
					// 	this.$message.error(res.msg);
					// }
				});

			},

			// 总提交
			submitApiFn() {
				this.$refs.copyright.validate((valid) => {
					if (valid) {
						let para = Object.assign({}, this.copyright);

						para.user_id = this.croUser.user_id;
						para.copyright_number = this.copyright_number;
						para.finish_date = (!para.finish_date || para.finish_date == '') ? '' : util.formatDate.format(new Date(para.finish_date), 'yyyy-MM-dd');
						para.publish_date = (!para.publish_date || para.publish_date == '') ? '' : util.formatDate.format(new Date(para.publish_date), 'yyyy-MM-dd');
						para.start_date = (!para.start_date || para.start_date == '') ? '' : util.formatDate.format(new Date(para.start_date), 'yyyy-MM-dd');

						// 未发表不上传首次发表信息
						if(para.publish_status == 0 ){
							para.publish_date = '';
							para.publish_region = '';
							para.publish_city = '';
						}
						if(this.update_status){

							update(para).then(res => {
											
								if(res.data){
									this.$router.push({ path: 'copyrightlist', query: { copyright_number: this.copyright_number }});
								}else if(res.tologin) {
									this.OUT_LOGIN();
									this.$router.push('/login');
								}else {
									this.$message.error(res.msg);
								}
							});
						}else{
							submitApi(para).then(res => {
											
								if(res.data){
									this.$router.push({ path: 'copyrightlist', query: { copyright_number: this.copyright_number }});
								}else if(res.tologin) {
									this.OUT_LOGIN();
									this.$router.push('/login');
								}else {
									this.$message.error(res.msg);
								}
							});
						}
					}
				});
			},

			// 获取流水号
			isrealFn(){
				let para = {user_id: this.croUser.user_id};
				isreal(para).then(res => {
					if(res.data){
						this.copyright_number = res.data.stream_num;
						this.lookFn();
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			}

		},
		mounted() {
			this.copyright_number = this.$route.query.copyright_number;
			if(!this.copyright_number){
				this.isrealFn();
			}else{
				this.update_status = true;
				this.lookFn();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.post-type .el-form-item {
		margin-bottom: 0px;
	}
	.mail-info p::before {
		content: '*';
		color: #fa5555;
		margin-right: 4px;
	}
	.mail-info p {
		color: #5a5e66;
	}
	.upload-div {
		position: relative;
		top: 0;
		left: 0;
		line-height: initial;
	}
	.upload-div .example {
		position: absolute;
		top: 5px;
		left: 90px;
		color: #416bc2;
	}
	.upload-div span.el-upload__tip {
		margin-left: 70px;
	}

	// .upload-div {
	// 	position: relative;
	// 	top: 0;
	// 	left: 0;
	// 	line-height: initial;
	// }
	// .upload-div .example {
	// 	position: absolute;
	// 	top: 5px;
	// 	left: 125px;
	// 	color: #416bc2;
	// }
	.content-outside {
		width: 100%;
		background: #f2f2f2;
		padding: 15px 0;
	}
	.content {
		width: 1200px;
		margin: 0px auto;
		box-sizing: border-box;
		padding: 15px;
		background: #fff;
		font-size: 14px;
	}
	.content h2 {
		font-size: 23px;
		font-weight: normal;
		padding: 30px 0 50px 0;
		width: 1000px;
		margin: 0 auto;
		// text-align: center;
	}
	.content h2>span {
		font-size: 14px;
		padding-left: 10px;
		color:#aaa;
	}
	/* hr */
	.content .hr{
		position: relative;
		top: 0;
		left: 0;
		height: 50px;
		border-top: 1px solid #c6c6c6;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	.content .hr>p {
		position: relative;
		top: -21px;
		left: 0;
		width: 300px;
		height: 40px;
		line-height: 40px;
		font-size: 21px;
		text-align: center;
		border: 1px solid #c6c6c6;
		border-radius: 3px;
		box-sizing: border-box;
		border-radius: 30px;
		margin: 0 auto;
		background: #fff;
	}

	.form_box {
		padding: 30px 0;
		background: #f2f2f2;
		border-radius: 10px;
	}
	.form_box .h3 {
		font-size: 16px;
		font-weight: normal;
		padding: 15px 0 25px 0;
	}
	.el-checkbox-group .el-checkbox{
		padding: 0px 15px 0px 0;
	}
	.el-radio-group .el-radio {
		padding-right: 15px;
		line-height: 36px;
	}
	.el-checkbox+.el-checkbox,
	.el-radio+.el-radio {
		margin: 0;
	}

	.form_next {
		text-align: center;
		padding: 25px 0;
	}

	.form_width {
		width: 1000px;
		// margin-left: 80px
		margin: 0 auto;
	}
	.tablepadding {
		padding: 0 10px;
		background: #fff;
	}
	.my_tip {
		font-size: 14px;
		line-height: 30px;
	}
</style>
